<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>TCC Cardapio</title>
	<meta name="description" content="">
	<meta name="author" content="">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="../codeigniter/assets/themes/default/css/font-awesome.min.css">
	<link rel="stylesheet" href="../codeigniter/assets/themes/default/css/layout.css">

<style type="text/css">

body {
			margin-top: 10px;
		}

		.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
			background: #BE413F;
			color: #fff;
			margin-bottom: 10px;
			text-align: center;
			padding: 10px 0;
		}

		@media all and (max-width: 768px) {
			.onerow {
				margin: 0 0 100px;
			}
		}

nav{
	padding: 10px;
	text-transform: uppercase; 
}

nav li{
	margin: 0 10px; /* Add some horizontal spacing */
	display: inline-block;
	*display: inline;  /* IE7 and below */
	zoom: 1;
}

nav a{
	display: inline-block;
	position: relative;
	padding: 8px 15px;
	border: 2px solid #fff;
	text-decoration: none;
	color: #999;
	font: bold 14px 'Lucida sans', Arial, Helvetica;
	background-color: #eaeaea;
	background-image: linear-gradient(top, #eaeaea, #fff);
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
				0 0 1px 0 rgba(0, 0, 0, .2),
				0 2px 2px rgba(0, 0, 0, .3),
				0 10px 10px -5px rgba(0, 0, 0, .2);
}

nav a:hover{
	background-color: #eee;
	background-image: linear-gradient(top, #eee, #fff);		
}	

nav a:active{
        top: 1px; /* Simulate the push button effect */
	background: #f5f5f5;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
				0 0 1px 0px rgba(0, 0, 0, .2),
				0 1px 2px rgba(0, 0, 0, .3);
}

#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  border-bottom: 4px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #0fa1e0;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;

}
#cssmenu > ul > li:hover > a {
  background: #070707;
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 14px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;


</style>
</head>
<body>

<div class="onepcssgrid-100">
<div class="onerow">


	<div class="col12">
	<h2>TCC Show! - Cardápio</h2>
	</div>


</div>


<div class="onerow">
	<div class="col12">
		<nav>
			<ul>
				<li><a href=""><i class="icon-glass icon-large"></i> Bebidas</a></li>
				<li><a href="">Comidas</a></li>
				<li><a href="">Lanches</a></li>				
				<li><a href="">Porcoes</a></li>
				<li><a href="">Pá</a></li>		
			</ul>
		</nav>
	</div>
</div>

<div class="onerow">
	<div class="col12">
		<div id='cssmenu'>
		<ul>
		   <li class='active'><a href='index.html'><i class="icon-glass icon-large"></i>Home</a></li>
		   <li class='has-sub'><a href='#'><i class="icon-glass icon-large"></i>Products</a>
		      <ul>
		         <li class='has-sub'><a href='#'><span>Product 1</span></a>
		            <ul>
		               <li><a href='#'><span>Sub Item</span></a></li>
		               <li class='last'><a href='#'><span>Sub Item</span></a></li>
		            </ul>
		         </li>
		         <li class='has-sub'><a href='#'><span>Product 2</span></a>
		            <ul>
		               <li><a href='#'><span>Sub Item</span></a></li>
		               <li class='last'><a href='#'><span>Sub Item</span></a></li>
		            </ul>
		         </li>
		      </ul>
		   </li>
		   <li><a href='#'><span>About</span></a></li>
		   <li class='last'><a href='#'><span>Contact</span></a></li>
		</ul>
		</div>
	</div>
</div>

<div class="onerow">

		<div class="col4">1</div>
		<div class="col4">2</div>
		<div class="col4 last">3</div>

</div>

<div class="onerow">
<div class="col12">


<h1>{blog_entries}{title}<br>{body}{/blog_entries}</h1>
<h2>Testing</h2>
<h3>Testing</h3>
<h4>Testing</h4>
<h5>Testing</h5>
<h6>Testing</h6>

<hr>
<h4>Testing H4</h4>
<p>Here's a paragraph beneath a header.  Sociis habitasse dictumst pid urna mattis urna tempor elementum, sed in, et, turpis velit amet ut! Aenean, pid sit turpis, risus aliquam amet etiam vel integer tortor, eu, rhoncus nisi, cum ridiculus parturient dis non amet sed magna odio dis natoque tortor, ridiculus, lectus vut nisi risus in. Enim non, massa duis, porta dapibus, integer, eu vel in urna sed augue augue platea, cursus dolor sagittis odio proin, velit, porta phasellus natoque, augue purus ridiculus magna natoque, urna a auctor? Ac non! Diam integer, nunc ac lacus, urna. Turpis nisi, tortor nec, pulvinar non magna nec mauris ac odio. Nisi! Dapibus lundium sed, elementum pulvinar, dolor porta ac! Urna et! Dictumst lorem, diam enim cum scelerisque diam habitasse arcu lectus.</p>




<del>This text has a line through it.</del>
<p>
If you ever need to have an exponent for example, just write 2<sup>3</sup>, and if you need something smaller and underneath the text, it will look like 3<sub>2</sub>.
</p>

<p>
Also, you can make text <b>bold</b> with the <code>&lt;b&gt;</code> or <code>&lt;strong&gt;</code> tags.
</p>

<p>
Of course, it's also possible to create <i>italic</i> text with the <code>&lt;i&gt;</code> tag.
</p>

<p>
<a href="#">Links</a> point to other documents, or a div on the same page.

<h3>Lists</h3>

<h4>Unordered lists</h4>
<p>Sometimes, lists are needed to organize content.</p>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3
		<ul>
			<li>Sub-item 1</li>
			<li>Sub-item 2</li>	
		</ul>
	</li>
	<li>Item 4</li>
</ul>

<h4>Ordered lists</h4>
<p>If you need a number list, that works as well:</p>
<ol>
<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3
		<ol>
			<li>Sub-item 1</li>
			<li>Sub-item 2</li>	
		</ol>
	</li>
	<li>Item 4</li>
</ol>

<h4>Definition lists</h4>
<p>Definition lists? You got it!</p>
<dl>
  <dt>First term:</dt>
    <dd>Definition</dd>
  <dt>Next term:</dt>
    <dd>Definition</dd>
</dl>

<h4>Tables</h4>

<p>There's some simple table styling as well.</p>

<table>
	<tr>
		<td>Row 1, Cell 1</td>
		<td>Row 1, Cell 2</td>
		<td>Row 1, Cell 3</td>
	</tr>
	<tr>
		<td>Row 2, Cell 1</td>
		<td>Row 2, Cell 2</td>
		<td>Row 2, Cell 3</td>
	</tr>
	<tr>
		<td>Row 3, Cell 1</td>
		<td>Row 3, Cell 2</td>
		<td>Row 3, Cell 3</td>
	</tr>
</table>

<h4>Quotes?</h4>
<blockquote>
<p>
BluCSS is awesome.  It is extremely responsive, has a logical system behind it, and has great text styling.
</p>
<cite>Alexandre Smirnov</cite>
</blockquote>

<q>Here's a one line quote.  These are also important.</q>
</div>

</div>
</div>

</body>
</html>